/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/no-use-before-define */
import DictTag from "@/components/DictTag";
import ExportModal from "@/components/ExportModal";
import downLoad from "@/utils/download";
import { CloudDownloadOutlined } from "@ant-design/icons";
import { ActionType, ProCard, ProColumns } from "@ant-design/pro-components";
import { Avatar, Button, FormInstance, Modal, Space } from "antd";
// import { DataNode } from 'antd/es/tree';
import CustomerTable from "@/components/CustomerTable";
import React, { useEffect, useRef, useState } from "react";
import { getDict } from "@/services/api/module/system/dict";
import { getPageList } from "@/services/api/module/system/user";
// import ResetPwd from './components/ResetPwd';
// import UpdateForm from './edit';
const { confirm } = Modal;
const tenantUserList: React.FC<{ tenantId?: number }> = ({ tenantId }) => {
	const formTableRef = useRef<FormInstance>();
	const actionRef = useRef<ActionType>();
	const [exportOpen, setExportOpen] = useState<boolean>(false);
	const [sexOptions, setSexOptions] = useState<any>([]);
	const [statusOptions, setStatusOptions] = useState<any>([]);
	useEffect(() => {
		getDict("sys_user_sex").then(data => {
			setSexOptions(data);
		});
		getDict("sys_normal_disable").then(data => {
			setStatusOptions(data);
		});
	}, []);

	const columns: ProColumns<API.System.UserVo>[] = [
		{
			title: "账号",
			dataIndex: "userName",
			valueType: "text",
			render: (_: any, record: any) => {
				return (
					<Space>
						<Avatar size={35} style={{ backgroundColor: "#2080f0", textAlign: "center", lineHeight: "35px" }}>
							{record?.nickName?.charAt(0).toUpperCase()}
						</Avatar>
						{record?.userName}
					</Space>
				);
				// return <Avatar size={35} src={record.avatar} />;
			}
		},
		{
			title: "真实姓名",
			dataIndex: "realName",
			valueType: "text"
		},
		{
			title: "昵称",
			dataIndex: "nickName",
			valueType: "text"
		},
		{
			title: "昵称",
			dataIndex: "nickName",
			valueType: "text"
		},
		{
			title: "角色名称",
			dataIndex: "realName",
			search: false,
			valueType: "text"
		},
		{
			title: "电话",
			dataIndex: "phonenumber",
			valueType: "text"
		},
		{
			title: "邮箱",
			dataIndex: "email",
			ellipsis: true,
			valueType: "text"
		},
		{
			title: "性别",
			dataIndex: "sex",
			valueType: "select",
			sorter: true,
			valueEnum: sexOptions,
			render: (_: any, record: any) => {
				return <DictTag enums={sexOptions} type="normal" value={record.sex} />;
			}
		},
		{
			title: "状态",
			dataIndex: "status",
			valueType: "select",
			sorter: true,
			valueEnum: statusOptions,
			render: (_: any, record: any) => {
				return <DictTag enums={statusOptions} type="badge" value={record.status} />;
			}
		}
	];

	const handleExport = async (values: any) => {
		const downLoadParams = {
			...values,
			...formTableRef?.current?.getFieldsValue(),
			current: actionRef?.current?.pageInfo?.current,
			pageSize: actionRef?.current?.pageInfo?.pageSize
		};
		return new Promise<void>(reslove => {
			downLoad.export("/system/user/export", downLoadParams);
			reslove();
		});
		// .then(() => {
		//   setExportOpen(false);
		//   return Promise.resolve();
		// })
		// .catch(() => {
		//   return Promise.reject();
		// });
	};

	return (
		<>
			<CustomerTable<API.System.UserVo>
				actionRef={actionRef}
				formRef={formTableRef}
				rowKey="id"
				search={false}
				key="tenantUserList"
				tableAlertRender={false}
				tableStyle={{
					minHeight: "calc(100vh - 270px)"
				}}
				columns={columns}
				// search={false}
				pagination={{
					defaultPageSize: 10,
					showQuickJumper: true,
					showSizeChanger: true
				}}
				// toolbar={{
				//   title: <Typography.Title level={4}>企业用户</Typography.Title>,
				// }}
				// search={{
				//   filterType: 'light',
				// }}
				rowSelection={{
					onChange: (_: any, selectedRows: any) => {},
					getCheckboxProps: (record: any) => ({
						name: record.id
					})
				}}
				// @ts-ignore
				request={params => {
					return getPageList({
						...params,
						tenantId: tenantId
					}).then(res => {
						return res;
					});
				}}
				// @ts-ignore
				toolBarRender={() => {
					return (
						<>
							<Button key="export" onClick={() => setExportOpen(true)}>
								<CloudDownloadOutlined />
								导出数据
							</Button>
						</>
					);
				}}
			/>
			<ExportModal
				onCancel={() => {
					setExportOpen(false);
				}}
				onSubmit={handleExport}
				title="导出用户信息"
				open={exportOpen}
				columns={columns}
			/>
		</>
	);
};

export default tenantUserList;
